<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 对话框（Dialog） - 动画</title>
  <link rel="stylesheet" href="script/jquery-ui.1.10.4.css">  <!-- 注意顺序-->
  <script src="script/jquery-1.10.min.js"></script>
  <script src="script/jquery-ui.1.10.4.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">

  <style>
  /*定义 .no-close类 为.ui-dialog-titlebar-close*/
      .no-close .ui-dialog-titlebar-close {  
        display: none;
        }
  </style>

  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
        dialogClass: "no-close", //使用上面定义好的类 style
  
      buttons: [   //定义button  OK
        {
          text: "OK",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ],

      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
</div>
 
<button id="opener">打开对话框</button>
 
 
</body>
</html>